<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form style="height:100%;">
                        <a-form-item :label="filterI18n('title','标题')">
                            <a-input v-model:value="title" style="width: 80%"></a-input>
                        </a-form-item>
                        <a-form-item :label="filterI18n('options','多选')">
                            <a-switch size="small" v-model:checked="settings.multiSelect"/>
                        </a-form-item>
                        <a-form-item :label="filterI18n('SourceValues','值来源')">
                            <a-radio-group :options="fromOptions" v-model:value="from"/>
                        </a-form-item>
                        <a-row v-show="from=='dic'">
                            <a-col :span="24">
                                <a-form-item  :label="filterI18n('dataDicItem','数据字典项')">
                                    <rx-input-button v-model="dic" @btnClick="setDic" style="width: 100%;" type="tag" :singleValue="false"></rx-input-button>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('customSQL','自定义SQL')">
                                    <rx-input-button ref="sql" @btnClick="openCustomQuery"  v-model="sql" :singleValue="false" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="12">
                                <a-form-item :label="filterI18n('textField','文本字段')">
                                    <a-select :options="sqlFields" v-model:value="sql_textfield" :getPopupContainer="(p)=>p.parentNode" style="width: 90%"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('numberField','数值字段')">
                                    <a-select :options="sqlFields" v-model:value="sql_valuefield" :getPopupContainer="(p)=>p.parentNode" style="width: 90%"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('parentField','父字段')">
                                    <a-select :options="sqlFields" v-model:value="sql_parentfield" :getPopupContainer="(p)=>p.parentNode" style="width: 90%"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='sql'">
                            <a-col :span="24">
                                <a-form-item  :label="filterI18n('paramConfig','参数配置')">
                                    <rx-grid ref="params" :data="paramsData" :columns="paramsColumns"  style="min-height: 180px;">
                                        <template #bindVal="{row}">
                                            <a-select v-model:value="row.bindVal" :options="queryAry" :getPopupContainer="(p)=>p.parentNode"/>
                                        </template>
                                    </rx-grid>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row v-show="from=='grant'">
                            <a-col :span="24">
                                <a-form-item  :label="filterI18n('permissType','权限类型')">
                                    <rx-input-button ref="grant" @btnClick="openFormEntityDataType" v-model="grant" :singleValue="false" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row >
                            <a-col :span="24">
                                <a-form-item :label="filterI18n('defaultValues','默认值')">
                                    <a-input  v-model:value="defValue" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import {Util,RxGrid,RxInputButton} from "@lowcode/jpaas-base-lib";
import ScreenApi from "@/api/screen-api";
import { ShareDialog } from '@lowcode/jpaas-share-component';

export default {
    name: "tree-filter",
    mixins: [filter],
    components:{
        RxGrid,
        RxInputButton
    },
    data() {
        return {
            from: "dic",
            fromOptions: [
                {'value': 'dic', 'label': this.filterI18n('dict','数据字典')},
                {'value': 'sql', 'label': this.filterI18n('customSQL','自定义SQL')},
                {'value': 'grant', 'label':this.filterI18n('permissData','权限数据')}],
            //数据字典
            dic:"",
            dicKey:"",
            //自定义查询
            sql:"",
            sql_textfield:"",
            sql_valuefield:"",
            sql_parentfield:"",
            paramsColumns:[
                {title:this.filterI18n('paramName','参数名'),field: 'comment'},
                {title:this.filterI18n('bindValue','绑定值'), field: 'bindVal',slots: {default: 'bindVal'}}
            ],
            paramsData:[],
            sqlFields:[],
            queryAry:[],
            //权限数据
            grant:""
        }
    },
    methods: {
		filterI18n(name,text,key){
			return this.$ti18(name,text,"filterControllerLang",key);
		},
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
                this.from=this.settings.from;
                //数据字典
                if(this.settings.from=="dic"){
                    this.dicKey=this.settings.dicKey;
                    this.dic=this.settings.dic;
                }
                //自定义查询
                else if(this.settings.from=="sql"){
                    if(this.settings.sql){
                        this.sql=this.settings.sql;
                        this.sql_textfield=this.settings.sql_textfield;
                        this.sql_valuefield=this.settings.sql_valuefield;
                        this.sql_parentfield=this.settings.sql_parentfield;
                        this.paramsData=this.settings.paramsData;
                        let sql=JSON.parse(this.settings.sql);
                        ScreenApi.getCustomQueryByKey({key: sql.value}).then(res=>{
                            if(res.data){
                                this.loadFields(res.data);
                            }
                        });
                    }
                }
                //权限数据
                else if(this.settings.from=="grant"){
                    this.grant=this.settings.grant;
                }
            }else {
                this.settings = {
                    from: "dic",
                    multiSelect: false,
                }
            }
            for (let i = 0; i < this.paramMappings.length; i++) {
                this.queryAry.push({
                    label:this.paramMappings[i].label,
                    value:this.paramMappings[i].key,
                    type:this.paramMappings[i].type
                });
            }
        },
        //获取配置
        getSetting(){
            this.settings.from=this.from;
            if(this.settings.from=="dic"){
                this.settings.dicKey=this.dicKey;
                this.settings.dic=this.dic;
            }else if(this.settings.from=="sql"){
                this.settings.sql=this.sql;
                this.settings.sql_textfield=this.sql_textfield;
                this.settings.sql_valuefield=this.sql_valuefield;
                this.settings.sql_parentfield=this.sql_parentfield;
                this.settings.paramsData=this.paramsData;
            }else if(this.settings.from=="grant"){
                this.settings.grant=this.grant;
            }
            return this.settings;
        },
        setDic() {
            let conf = {
                curVm: this,
                data: {allowTree: true},
                widthHeight: ['800px', '600px'],
            }
            let self_ = this;
            ShareDialog.openSysDicDialog(conf, function (curVue, row) {
                self_.dicKey = row.alias;
                self_.dic = JSON.stringify({label: row.name, value: row.alias})
            })
        },
        openCustomQuery(vm){
            ShareDialog.openSqlDialog({
                curVm: this, widthHeight: ['1200px', '600px']
            }, function (self, data) {
                self.loadFields(data);
                self.sql=JSON.stringify({label: data.name, value: data.key});
            })
        },
        loadFields(row){
            let fieldStr=row.resultField;
            let whereStr=row.whereField;
            if(whereStr){
                let self=this;
                let fields = JSON.parse(whereStr);
                fields.map(function(item){
                    if(item.valueSource=='param') {
                        let params=self.paramsData.find(obj => obj.fieldName==item.fieldName );
                        if(!params){
                            self.paramsData.push(Object.assign(item,{bindVal:""}));
                        }
                    }
                })
            }
            if(fieldStr) {
                let fileds = JSON.parse(fieldStr);
                let ary = fileds.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment
                    }
                })
                this.sqlFields = ary;
            }
        },
        openFormEntityDataType(vm){
            let self=this;
            let config={curVm:this,widthHeight:['800px','600px'],data:{multiSelect:false}};
            ShareDialog.openFormEntityDataTypeDialog(config,function(row){
                self.grant=JSON.stringify({label: row.name, value: row.id});
            })
        },
    },
    watch: {}
}
</script>

<style scoped>
</style>
